<!--  -->
<template>
  <div>
    <section>
      <v-container grid-list-xl fluid>
        <v-layout class="" wrap>
          <v-flex xs12><router-link :to="{ name: 'ShopList' }"><span class="headline">分类结果</span></router-link></v-flex>
          <v-flex xs12>
            分类：
            <template v-for="ca in category">
              <router-link :key="ca.cid" :to="{ name: 'ShopList', query: { cid: ca.cid } }"><span class="ma-2">{{ca.cname}}</span></router-link>
            </template>
          </v-flex>
          <v-flex xs12 sm6 md4 lg3 xl2 v-for="n in 18" :key="n">
            <v-card color="" height="300" hover :to="{ name: 'ShopDetail' }">
              <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg" aspect-ratio="2.75" height="180"></v-img>
              <v-card-title class="pb-0">
                <span color="">{{n}}号产品</span>
                <span class="red--text">￥ {{n}}2.00</span>
                <span><v-btn icon small><v-icon>shopping_cart</v-icon></v-btn></span>
              </v-card-title>
              <v-card-text>产品介绍</v-card-text>
              <v-card-actions></v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </section>
  </div>
</template>

<script>
// import ShopHeader from '@/apps/www/Layout/components/ShopHeader.vue'
import { fetchShopList } from '@/api/shop/goods.js'
export default {
  name: 'ShopList',
  props: {
    // cid: {
    //   type: Number,
    //   default: null
    // }
  },
  data: function () {
    return {
      category: this.$store.state.menu.menuData || [
        { cname: '惠文创' },
        { cname: '惠旅游' },
        { cname: '惠教育' },
        { cname: '惠出版' },
        { cname: '惠演绎' },
        { cname: '惠赛事' },
        { cname: '惠艺术' },
        { cname: '惠文玩' },
        { cname: '惠阅读' },
        { cname: '惠休闲' },
        { cname: '惠康养' },
        { cname: '惠影视' },
        { cname: '惠动漫' },
        { cname: '惠网游' },
        { cname: '惠市集' }
      ],
      itemsData: []
    }
  },
  created: function () {
    this.fetchData()
  },
  // components: { ShopHeader },
  computed: {
    queryCondition: function () {
      return { cid: this.$route.query.cid }
    }
  },
  methods: {
    fetchData: function () {
      fetchShopList(this.queryCondition).then(res => {
        this.itemsData = res.data
      })
    }
  }
}
</script>
<style>
a{
  text-decoration:none;
}
</style>
